<template>
    <div class="buy-detail">
        <img class="banner" :src="`${_oss_}images/buy-detail/bg.png`" alt="北京华锐云空间" />

        <div class="bg">
            <div class="title">云空间会员服务</div>

            <div class="template-box" v-if="template_id">
                <div class="template-name">
                    {{ templateName }}
                </div>

                <div class="btn-change" @click="onChangeTemplate">切换</div>
            </div>

            <div class="btn-group">
                <div class="btn-item" :class="{ active: active === 1 }" @click="onActive(1)">
                    按月
                </div>
                <div class="btn-item" :class="{ active: active === 2 }" @click="onActive(2)">
                    按年
                </div>
            </div>
        </div>

        <!-- 月 -->
        <div class="vip-info-box" v-show="active === 1">
            <div class="desc-box__title">-普通款-</div>
            <VipInfoBox class="desc-box-1" :info="VipInfo.month[0]" :priceMap="priceMap" :buyList="buyList" :type="type"
                unit="month" />

            <template v-if="type === 'template'">
                <div class="desc-box__title" style="margin-top: 83px">
                    -元宇宙多人款-
                </div>
                <VipInfoBox class="desc-box-2" :info="VipInfo.month[1]" :priceMap="priceMap" :buyList="buyList" :type="type"
                    unit="month" />
            </template>
        </div>

        <!-- 年 -->
        <div class="vip-info-box" v-show="active === 2">
            <div class="desc-box__title">-普通款-</div>
            <VipInfoBox class="desc-box-3" :info="VipInfo.year[0]" :priceMap="priceMap" :buyList="buyList" :type="type"
                unit="year" />

            <template v-if="type === 'template'">
                <div class="desc-box__title" style="margin-top: 83px">
                    -元宇宙多人款-
                </div>
                <VipInfoBox class="desc-box-4" :info="VipInfo.year[1]" :priceMap="priceMap" :buyList="buyList" :type="type"
                    unit="year" />
            </template>
        </div>
    </div>

    <LazyLayoutFooterP />
    <DialogTemplateChooseP ref="templateDialogRef" @confirm="onConfirm" />
</template>
<script setup>
import { VipInfo, useContent } from ".";
import VipInfoBox from "./VipInfoBox/P.vue";

const cacheStore = useCacheStore();
const router = useRouter();
const templateDialogRef = ref(null);
const {
    template_id,
    templateName,
    type,
    active,
    priceMap,
    buyList,
    BannerList,

    onActive,
    GetPrice,
    GetStatus,
    GetCoupons,
    GetBannerList,
} = useContent();
const userStore = useUserStore();

if (userStore.isLogin) {
    await GetCoupons();
}

if (template_id) {
    await GetPrice();
} else {
    ElMessageBox.confirm("", "请选择一个模板！", {
        "show-close": false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        showCancelButton: false,
        autofocus: false,
        lockScroll: false,
        confirmButtonText: "确定",
    }).then(() => {
        templateDialogRef.value?.open(template_id, !!template_id);
    });
}

const onChangeTemplate = () => {
    templateDialogRef.value?.open(template_id, !!template_id);
}

const onConfirm = async (id) => {
    router.push(`/buyDetail/${id}.html`)
}

watch(() => cacheStore.key, async () => {
    if (userStore.isLogin) {
        await GetCoupons();
    }

    if (template_id) {
        await GetPrice();
    }
    await GetStatus();
})

onMounted(async () => {
    await nextTick();

    if (template_id && userStore.isLogin) {
        await GetStatus();
    }
});
</script>
<style lang="scss" scoped>
.vip-info-box {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 39px 50px 48px;
    border-radius: 20px;
    z-index: 1;
}

.desc-box__title {
    text-align: center;
    font-size: 30px;
    color: #333;
    margin-bottom: 53px;
    font-weight: bold;
}

.buy-detail {
    background-color: #f9f0ea;
    padding-bottom: 132px;
    user-select: none;

    .banner {
        width: 100%;
        display: block;
    }

    .bg {
        width: 100%;

        .title {
            font-weight: bold;
            font-size: 60px;
            color: #333333;
            text-align: center;
            margin-top: 55px;
        }

        .template-box {
            display: flex;
            justify-content: center;
            margin-top: 80px;
            font-size: 22px;

            .btn-change {
                margin-left: 20px;
                color: #5085FB;
                cursor: pointer;
            }
        }

        .btn-group {
            display: flex;
            width: 400px;
            height: 70px;
            background: rgba($color: #fff, $alpha: 0.5);
            border-radius: 12px;
            margin: 30px auto;
            padding: 2px 3px;

            .btn-item {
                width: 196px;
                height: 66px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                font-weight: bold;
                color: #333;
                border-radius: 12px;
                cursor: pointer;

                &.active {
                    background: linear-gradient(90deg, #ffe1ca, #eeb48c);
                }
            }
        }
    }
}

.desc-box-1 {
    :deep(.desc-bottom) {
        height: 480px;
    }
}

.desc-box-2 {
    :deep(.text) {
        font-size: 12px !important;
        margin-top: 30px !important;
    }

    :deep(.desc-bottom) {
        height: 640px;
    }
}

.desc-box-3 {
    :deep(.desc-bottom) {
        height: 470px;
    }
}

.desc-box-4 {
    :deep(.text) {
        font-size: 12px !important;
        margin-top: 30px !important;
    }

    :deep(.desc-bottom) {
        height: 620px;
    }
}
</style>
